<script setup>
const props = defineProps({
  item:{
    type: Object,
    default() {
      return {
        id: 5,
        title: '商家招募摄影师列表商家招募摄影师商家招募摄影师列表商家招募摄影列表商家招募摄影师列',
        address: '河南省洛阳市伊滨区河南省洛阳市伊滨区河南省洛阳市伊滨区河南省洛阳市伊滨区',
        end_time: '2022-12-30 23:59:59',
        img: '',
        tags: [
          { name: '设备自带' },
          { name: '河南洛阳市'},
          { name: '素材片段'},
          { name: '休闲娱乐'}
        ] 
      }
    }
  },
  type: {
    type: Number,
    default: 1
  }
})
</script>

<template>
  <view class="suggest-box-a3">
    <image src=""></image>

    <view class="title-a1">
      <cdn-img src="/static/img/shoot.png" class="shoot-a1" />
      {{item.title}}
    </view>
    <view class="price-a1">任务金￥<text class="num-a1">299</text></view>
    <view class="btns">查看详情</view>
  </view>
</template>

<style lang="scss">
.suggest-box-a3{
  width: 167.5px;
  min-height: 272.5px;
  background: #ffffff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  image{
    width: 167.5px;
    height: 167.5px;
    background: #ffcbcb;
    border-radius: 5px 5px 0px 0px;
  }
  .title-a1{
    width: 100%;
    margin: 6px 6px 0 6px;
    box-sizing: border-box;
    font-size: 12px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    color: #333333;
    padding-right: 10px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 这里是超出几行省略 */
    overflow: hidden;
    .shoot-a1{
      width: 32.5px;
      height: 15px;
      margin-right: 0.5px;
      vertical-align: middle;
    }
  }
  .price-a1{
    padding: 0 6px;
    font-size: 12px;
    color: #FE3234;
    .num-a1{
      font-size: 20px;
      font-weight: bolder;
    }
  }
  .btns{
    padding: 0 6px;
    font-size: 11px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: left;
    color: #2b5eff;
    box-sizing: border-box;
  }
}
</style>
